<template>
    <ul class="my-list" >
        <slot>
        </slot>
    </ul>
</template>

<script>
import myListItem from './my-list-item.vue'
export default {
    name: 'my-list',
    props:["defaultActive"],
    data: function() {	
        return {
            activeIndex:this.defaultActive?this.defaultActive:'1'
        }
    },
    methods: {
        setActiveIndex:function(currentIndex){
            
            this.activeIndex=currentIndex
            console.log(this.activeIndex)
        }
    },
    components:{
        myListItem //注册 my-list-item组件
    },
    watch:{
        activeIndex:function(val){
            this.activeIndex=val
            //console.log(this.activeIndex)
        }
    },
    provide:function(){
        return {
            activeIndex:this.activeIndex,
            setActiveIndex:this.setActiveIndex,
            myList:this
        }
    }
}
</script>

<style lang="scss" scoped>
    .my-list{
        padding:0;
        display: flex;
        justify-content: flex-start;
        font-size:12px;
        .my-list-item{
            margin-right: 10px;
          /*   padding: 1px 8px; */
            cursor: pointer;
            border-radius: 3px;
            &:hover{
                color: rgb(65, 188, 236);
            }
    
        }
    }
</style>